<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<title>绑定手机号</title>
<link href="style/login.css" rel="stylesheet" type="text/css" />
<link href="css/vant.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/vue/vue.js"></script>
<script src="js/vue/axios.js"></script>
<script src="js/vue/qs.js"></script>
<script src="js/vue/MD5.js"></script>
<script src="js/vue/vant.js"></script>
</head>
<body>
<div id="app">
    <div class="ve_title">{{titles}}</div>
    <div class="main">
        <div class="login_txt" style="text-align: center;">仅需一步</div>
        <div class="login_txt"  style="text-align: center;">立即成为本店会员</div>
        <input id="send" type="hidden" value="60" />
        <div class="login_o" id="phone_login">
            <div class="login_text">手机号</div>
            <div class="login_input">
                <input v-model="from.phone" id="phone" type="text" class="phone_input" onkeyup="this.value=this.value.replace(/\D/g,'');" maxlength="11" onafterpaste="this.value=this.value.replace(/\D/g,'')" placeholder="请输入手机号码"/>
            </div>
            <div class="login_text" style="margin-top:10px">短信验证码</div>
            <div class="login_input_code">
                <input v-model="from.sms_code" id="code" type="text" class="code_input" style="width: 50%;" placeholder="请输入验证码" onkeyup="this.value=this.value.replace(/\D/g,'');" maxlength="6" onafterpaste="this.value=this.value.replace(/\D/g,'')"/>
                <div class="code_getcode" @click="get_sms_codeSet()">获取验证码</div>
            </div>
        </div>
        <div class="login_but_o" @click="setpssword()">绑定手机号</div>
    </div>
</div>
</body>
<script>
var app = new Vue({
    el: '#app',
    data: {
        vid:'',
        titles:'',
        helloData: {},
        from:{
            sms_code: "",
            phone: "",
        }
    },
    created(){
        this.setCanS()
    },
    methods: {
            //设置参数
            setCanS(){
                let Request = new Object()
                Request = GetRequest()
                this.vid = Request['vid']
                //获取场馆名称
                if(this.vid==undefined||this.vid==''){
                    this.vid=''
                }
                this.from.vid=this.vid
            },
            //登录设置密码
            setpssword() {
                    let params=this.from
                    axios.get('/mobileapi/member/card_info.php?act=bindPhone',
                    {params:params}).then(data=>{
                        let { msg, code} = data.data
                            if (code !== 200) {
                                window.vant.Toast.fail(msg)
                            } else {
                                window.vant.Toast.success("绑定成功")
                                setTimeout(function(){
                                    sessionStorage.setItem('token',data.data.token)
                                    window.location.href=document.referrer
                                    //location.reload()
                                 }, 2000);
                            }
                        }).catch(function (error) { 
                            console.log(error); 
                    });
            },
             //验证手机号正不争取
             isPoneAvaila(phone) {
                var myreg=/^[1][3,4,5,6,7,8,9][0-9]{9}$/
                if (!myreg.test(phone)) {
                    return false;
                } else {
                    return true;
                }
            },
            //获取手机验证码
            get_sms_codeSet(){
                var send=parseInt($("#send").val());
	            var phone=parseInt($("#phone").val());
                if(!this.isPoneAvaila(this.from.phone)){
                    window.vant.Toast.fail("请输入正确的手机号")
                    return false;
                }
                const params={
                    phone:this.from.phone
                }
                if(send==60){
                    axios.post('/mobileapi/member/login.php?act=getsms',Qs.stringify(params)).then(function(response){
                        window.vant.Toast.success("短信已发，请注意查收")
                        }).catch(function (error) {
                            console.log(error)
                            window.vant.Toast.fail("短信发送失败！请确认手机号是否正确。");
                    })   
                    var set=setInterval(function(){
                        var send_t=--send;
                        $(".code_getcode").html(""+send_t+"秒");
                        $("#send").val(--send_t)
                    }, 1000);
                    setTimeout(function(){
                        $(".code_getcode").html("重新获取");
                        $("#send").val(60)
                        clearInterval(set);
                    }, 60000);
                }	
            },
           
        }  
})
</script>
<script type="text/javascript" src="js/js.js"></script>
</html>